<!--
 * @Author: XY
 * @Date: 2023-11-10 16:59:58
 * @LastEditors: XY
 * @LastEditTime: 2023-11-25 00:38:51
 * @FilePath: \friendsApp\see_you\src\components\reviewPopup.vue
 -->
<template>
  <div class="popup">
    <!-- <van-popup
      v-model="showViewPop"
      round
        closeable
        position="bottom"
        :close-on-click-overlay="false"
        @click-close-icon="closeReviewPop"
        @close="closeReviewPop"
        :style="{ height: '80%' }"
      > -->
    <div class="info">
      <div class="info-start">
        <div>信息相符度{{ params.info_score }}</div>
        <van-rate
          v-model="params.info_score"
          allow-half
          void-icon="star"
          void-color="#eee"
          color="#ffd21e"
          size="20"
        />
      </div>
      <div class="info-start">
        <div>服务态度{{ params.service_score }}</div>
        <van-rate
          v-model="params.service_score"
          allow-half
          void-icon="star"
          void-color="#eee"
          color="#ffd21e"
          size="20"
        />
      </div>
      <div class="info-start">
        <div>性价比{{ params.effec_score }}</div>
        <van-rate
          v-model="params.effec_score"
          allow-half
          void-icon="star"
          void-color="#eee"
          color="#ffd21e"
          size="20"
        />
      </div>
      <div class="info-start">
        <div>推荐度{{ params.recom_score }}</div>
        <van-rate
          v-model="params.recom_score"
          allow-half
          void-icon="star"
          void-color="#eee"
          color="#ffd21e"
          size="20"
        />
      </div>
      <!-- <div class="info-start">
          <div>综合评价3.5</div>
          <van-rate
            v-model="value"
              allow-half
              void-icon="star"
              void-color="#eee"
              color="#ffd21e"
              size="20"
            />
          </div> -->
      <div class="info-serve">
        <div class="info-serve-label">服务</div>
        <div class="info-serve-tags">
          <p
            v-for="item in params.service_label"
            :key="item.id"
            @click="deleteLabel('service', item)"
          >
            {{ item.label_name }} <van-icon name="cross" size="10" />
          </p>
          <p @click="addLabel('service')">
            <van-icon name="plus" size="10" />添加服务
          </p>
        </div>
      </div>
      <div class="info-review">
        <div class="info-review-label">评论</div>
        <div class="info-review-tags">
          <p
            v-for="item in params.assess_label"
            :key="item.id"
            @click="deleteLabel('assess', item)"
          >
            {{ item.label_name }} <van-icon name="cross" size="10" />
          </p>
          <p @click="addLabel('assess')">
            <van-icon name="plus" size="10" />添加评论
          </p>
        </div>
      </div>
      <div class="info-note">
        <textarea
          class="info-note-textarea"
          :value="params.comment"
          @change="setInputValue($event.target.value)"
          placeholder="请输入您的点评"
          id=""
          cols="30"
          rows="10"
        ></textarea>
      </div>
      <div class="bg">
        <div class="info-submit" v-debounce="addUserReplyFun">提交点评</div>
      </div>
    </div>
    <!-- </van-popup> -->
    <addLabel
      @closeLabelViewPop="closeLabelViewPop"
      :showLabelViewPop="showLabelViewPop"
      :type="labelType"
    ></addLabel>
  </div>
</template>

<script>
import { addUserReply } from '@/api/index'
import { Dialog } from 'vant'

import { Toast } from 'vant'
import addLabel from '@/components/addLabel.vue'
export default {
  name: 'popup',
  props: {
    uid: {
      type: Number,
      default: 0,
    },
    msg: String,
  },
  components: {
    addLabel,
  },
  data() {
    return {
      showLabelViewPop: false,
      labelType: 'service',
      params: {
        comment: '',
        info_score: 0,
        service_score: 0,
        effec_score: 0,
        recom_score: 0,
        merchant_id: '',
        service_label: [],
        assess_label: [],
      },
      value: '',
    }
  },
  mounted() {},
  methods: {
    setInputValue(e) {
      this.params.comment = e
    },
    addUserReplyFun() {
      this.params.merchant_id = this.uid
      let data = JSON.parse(JSON.stringify(this.params))
      data.service_label = data.service_label.map((item) => item.id)
      data.assess_label = data.assess_label.map((item) => item.id)
      if (
        data.service_score == 0 ||
        data.effec_score == 0 ||
        data.recom_score == 0 ||
        data.info_score == 0
      ) {
        Toast('请给所有评分打分')
        return
      }
      if (data.comment == '') {
        Toast('请输入评论')
        return
      }
      if (data.service_label.length == 0) {
        Toast('请至少选择一个服务标签')
        return
      }
      if (data.assess_label.length == 0) {
        Toast('请至少选择一个评论标签')
        return
      }
      Dialog.confirm({
        title: '提交评论',
        message: '确认提交评论',
        confirmButtonColor: '#3296fa',
      })
        .then(() => {
          console.log(data)

          addUserReply(data).then((res) => {
            Toast('提交点评成功！')
            this.$emit('closePop')
          })
        })
        .catch(() => {
          this.$emit('closePop')
        })
    },
    deleteLabel(type, items) {
      if (type == 'service') {
        let index = this.params.service_label.findIndex((item) => {
          return item.id == items.id
        })
        this.params.service_label.splice(index, 1)
      } else if (type == 'assess') {
        let index = this.params.assess_label.findIndex((item) => {
          return item.id == items.id
        })
        this.params.assess_label.splice(index, 1)
      }
    },
    closeLabelViewPop(data) {
      console.log(data)
      this.showLabelViewPop = false
      if (data.type == 'service') {
        this.params.service_label = data.data
      }
      if (data.type == 'assess') {
        this.params.assess_label = data.data
      }
    },
    addLabel(type) {
      this.labelType = type
      this.showLabelViewPop = true
    },
    // closeReviewPop() {
    //   this.$emit('closePop')
    // },
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.info {
  padding: 20px 15px 20px 15px;
  position: relative;
  margin-bottom: 80px;

  &-name {
    font-size: 14px;
    font-weight: 500;
    color: #1a1a1a;
    line-height: 24x;
  }

  &-start {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    font-weight: 500;
    line-height: 20px;
    color: #6b85f7;
    border-radius: 8px;
    padding: 15px;

    .van-rate > div {
      margin: 0 40px !important;
    }
  }

  &-start:nth-of-type(2n-1) {
    background: #f5f5f5;
    border-radius: 8px;
    padding: 15px;
  }

  &-serve,
  &-review {
    display: flex;
    align-items: baseline;
    font-size: 12px;
    font-weight: 400;
    color: #767676;
    line-height: 12px;
    margin-bottom: 10px;

    &-label {
      flex: 1;
    }

    &-tags {
      flex: 9;
      display: flex;
      flex-wrap: wrap;

      p {
        margin-right: 8px;
        padding: 4px 7px;
        border-radius: 8px;
      }
    }
  }

  &-serve {
    margin-top: 20px;

    &-tags {
      p {
        color: #8a38f5;
        background: #e7d4ff;
        margin-bottom: 10px;
      }

      P:last-of-type {
        background: #fff;
        border: 1px solid #8a38f5;
      }
    }
  }

  &-review {
    &-tags {
      p {
        background: #ffd7ed;
        color: #eb2f96;
        margin-bottom: 10px;
      }

      P:last-of-type {
        background: #fff;
        border: 1px solid #eb2f96;
      }
    }
  }

  &-note {
    font-size: 14px;
    font-weight: 400;
    color: #1a1a1a;
    line-height: 20px;
    padding: 7px 8px;
    background: #f5f5f5;
    border-radius: 8px;
    height: 100px;

    &-textarea {
      background: #f5f5f5;
      border: none;
      width: 100%;
      height: 100%;
    }
  }

  &-submit {
    height: 50px;
    background: linear-gradient(180deg, #3764ec 0%, #6b85f7 100%);
    border-radius: 8px;
    font-size: 16px;
    font-weight: 500;
    color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 10px 30px 20px;
  }
}
.bg {
  position: fixed;
  width: 100%;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
}
</style>
